<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>个人偏好设置</span>
      </div>
      <div>
        <el-form :model="form" size="mini" label-position="left" label-width="100px" ref="form">
          <el-row>
            <el-col :span="12">
              <el-form-item label="坐席编号" prop="AGENTID">
                <el-input v-model="form.AGENTID" placeholder="请输入坐席编号" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-collapse v-model="activeNames">
                <el-collapse-item name="2">
                  <template slot="title">
                    上班时间段偏好<i class="header-icon el-icon-s-cooperation"></i>
                  </template>
                  <div class="ml-40">
                    <el-col :span="24">
                      <el-table :data="tableData" style="width: 100%">
                        <el-table-column prop="PRETIME" label="日期" width="100">
                        </el-table-column>
                        <el-table-column prop="like1" label="第一偏好" align="center">
                          <template slot-scope="scope">
                            <div>
                              <el-time-picker
                                style="width:100%"
                                is-range size="small"
                                v-model="scope.row.like1"
                                @focus="ChangeTime(scope.row,'like1')"
                                range-separator="-"
                                format="HH:mm"
                                value-format="HH:mm"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                placeholder="选择时间范围">
                              </el-time-picker>
                              <!-- <el-time-select size="small" style="width:49%;" placeholder="起始时间"
                                v-model="scope.row.like1[0]" :picker-options="{
                                  start: '00:00',
                                  step: '00:05',
                                  end: '23:30'
                                }">
                              </el-time-select>
                              <el-time-select size="small" placeholder="结束时间" style="width:49%;"
                                v-model="scope.row.like1[1]" :picker-options="{
                                  start: '00:00',
                                  step: '00:05',
                                  end: '23:30',
                                  minTime: scope.row.like1[0]
                                }">
                              </el-time-select> -->
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column prop="like2" label="第二偏好" align="center">
                          <template slot-scope="scope">
                            <div>
                              <el-time-picker
                                style="width:100%"
                                is-range size="small"
                                v-model="scope.row.like2"
                                @focus="ChangeTime(scope.row,'like2')"
                                range-separator="-"
                                format="HH:mm"
                                value-format="HH:mm"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                placeholder="选择时间范围">
                              </el-time-picker>
                              <!-- <el-time-select size="small" style="width:49%;" placeholder="起始时间"
                                v-model="scope.row.like2[0]" :picker-options="{
                                  start: '00:00',
                                  step: '00:05',
                                  end: '23:30'
                                }">
                              </el-time-select>
                              <el-time-select size="small" style="width:49%;" placeholder="结束时间"
                                v-model="scope.row.like2[1]" :picker-options="{
                                  start: '00:00',
                                  step: '00:05',
                                  end: '23:30',
                                  minTime: scope.row.like2[0]
                                }">
                              </el-time-select> -->
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column prop="like3" label="第三偏好" align="center">
                          <template slot-scope="scope">
                            <div>
                              <el-time-picker
                                style="width:100%"
                                is-range size="small"
                                v-model="scope.row.like3"
                                range-separator="-"
                                @focus="ChangeTime(scope.row,'like3')"
                                format="HH:mm"
                                value-format="HH:mm"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                placeholder="选择时间范围">
                              </el-time-picker>
                              <!-- <el-time-select size="small" style="width:49%;" placeholder="起始时间"
                                v-model="scope.row.like3[0]" :picker-options="{
                                  start: '00:00',
                                  step: '00:05',
                                  end: '23:30'
                                }">
                              </el-time-select>
                              <el-time-select placeholder="结束时间" size="small" style="width:49%;"
                                v-model="scope.row.like3[1]" :picker-options="{
                                  start: '00:00',
                                  step: '00:05',
                                  end: '23:30',
                                  minTime: scope.row.like3[0]
                                }">
                              </el-time-select> -->
                            </div>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-col>
                    <el-col :span="13" class="mt-15">
                      <el-form-item label="备注" prop="NOTES2">
                        <el-input type="textarea" :rows="2" size="mini" placeholder="请输入备注" v-model="form.NOTES2" maxlength="200">
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4" :offset="18">
                      <el-form-item>
                        <el-button @click="delPrefer('2')" :disabled="buttonFlag.indexOf('2') ==-1" size="mini"
                          type="danger">删除</el-button>
                      </el-form-item>
                    </el-col>
                  </div>
                </el-collapse-item>
                <el-collapse-item name="3">
                  <template slot="title">
                    休息日偏好<i class="header-icon el-icon-s-tools"></i>
                  </template>
                  <div class="ml-40">
                    <el-col :span="24">
                      <el-form-item label="休息日偏好" prop="HOLIDAY">
                        <el-transfer target-order="push" :props="{key: 'key',label: 'label'}" :titles="['工作日','休息日']"
                          v-model="form.HOLIDAY" :data="weekOption">
                        </el-transfer>
                      </el-form-item>
                    </el-col>
                    <el-col :span="13" class="mt-15">
                      <el-form-item label="备注" prop="NOTES3">
                        <el-input type="textarea" :rows="2" size="mini" placeholder="请输入备注" v-model="form.NOTES3" maxlength="200">
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4" :offset="18">
                      <el-form-item>
                        <el-button @click="delPrefer('3')" :disabled="buttonFlag.indexOf('3') ==-1" size="mini"
                          type="danger">删除</el-button>
                      </el-form-item>
                    </el-col>
                  </div>
                </el-collapse-item>
                <el-collapse-item name="1">
                  <template slot="title">
                    加班偏好<i class="header-icon el-icon-circle-plus"></i>
                  </template>
                  <div class="ml-40">
                    <el-col :span="12">
                      <el-form-item label="加班类型偏好" prop="OTTYPE">
                        <el-select v-model="form.OTTYPE" clearable placeholder="请选择加班偏好">
                          <el-option label="班次前加班" value="B"></el-option>
                          <el-option label="班次后加班" value="A"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="13">
                      <el-form-item label="备注" prop="NOTES1">
                        <el-input type="textarea" :rows="2" size="mini" placeholder="请输入备注" v-model="form.NOTES1" maxlength="200">
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4" :offset="18">
                      <el-form-item>
                        <el-button @click="delPrefer('1')" :disabled="buttonFlag.indexOf('1') ==-1" size="mini"
                          type="danger">删除</el-button>
                      </el-form-item>
                    </el-col>
                  </div>
                </el-collapse-item>
                <el-collapse-item name="4">
                  <template slot="title">
                    技能排班偏好<i class="header-icon el-icon-info"></i>
                  </template>
                  <div class="ml-40">
                    <el-col :span="12">
                      <el-form-item label="技能排班类型" prop="SKILLTYPE">
                        <el-select v-model="form.SKILLTYPE" clearable placeholder="请选择技能排班类型" @change="changeSkill">
                          <el-option label="优先技能偏好排班" value="1"></el-option>
                          <el-option label="优先高熟练度技能排班" value="2"></el-option>
                          <el-option label="优先低熟练度技能排班" value="3"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="form.SKILLTYPE == '' || form.SKILLTYPE == '1'">
                      <el-form-item label="技能偏好" prop="SKILLLIST">
                        <el-transfer target-order="push" :titles="['技能','偏好']" v-model="form.SKILLLIST"
                          :props="{key: 'FIELDKEY',label: 'FIELDVALUE'}" :data="skillOption">
                        </el-transfer>
                      </el-form-item>
                    </el-col>
                    <el-col :span="13">
                      <el-form-item label="备注" prop="NOTES4">
                        <el-input type="textarea" :rows="2" size="mini" placeholder="请输入备注" v-model="form.NOTES4" maxlength="200">
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4" :offset="18">
                      <el-form-item>
                        <el-button @click="delPrefer('4')" :disabled="buttonFlag.indexOf('4') ==-1" size="mini"
                          type="danger">删除</el-button>
                      </el-form-item>
                    </el-col>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </el-col>
            <el-col :span="6" :offset="17" class="mt-15">
              <el-form-item>
                <el-button size="mini" type="primary" @click="savePrefer">保存</el-button>
                <el-button @click="queryPrefer" size="mini" type="danger">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

      </div>
    </el-card>
  </div>
</template>
<script>
  import dataQuery from '@/message/wfm/baseData/dictionaryManage/dictionaryQuery'
  import requestWFM from "@/common/utils/requestWFM";
  import query from '@/message/wfm/userScheduleManage/preferences/query';
  import del from '@/message/wfm/userScheduleManage/preferences/del';
  import manage from '@/message/wfm/userScheduleManage/preferences/manage';

  export default {
    mounted() {
      this.queryPrefer()
      this.skillDataQuery()
    },
    data() {
      return {
        buttonFlag: ['1', '3'],
        tableData: [{
            PRETIME: '周一',
            like1: [],
            like2: [],
            like3: []
          },
          {
            PRETIME: '周二',
            like1: [],
            like2: [],
            like3: []
          },
          {
            PRETIME: '周三',
            like1: [],
            like2: [],
            like3: []
          },
          {
            PRETIME: '周四',
            like1: [],
            like2: [],
            like3: []
          },
          {
            PRETIME: '周五',
            like1: [],
            like2: [],
            like3: []
          },
          {
            PRETIME: '周六',
            like1: [],
            like2: [],
            like3: []
          },
          {
            PRETIME: '周日',
            like1: [],
            like2: [],
            like3: []
          },
        ],
        weekOption: [{
            key: '1',
            label: '星期一'
          },
          {
            key: '2',
            label: '星期二'
          },
          {
            key: '3',
            label: '星期三'
          },
          {
            key: '4',
            label: '星期四'
          },
          {
            key: '5',
            label: '星期五'
          },
          {
            key: '6',
            label: '星期六'
          },
          {
            key: '7',
            label: '星期日'
          },
        ],
        activeNames: ['1', '2', '3', '4'],
        skillOption: [],
        form: {
          NOTES1: '',
          NOTES2: '',
          NOTES3: '',
          NOTES4: '',
          AGENTID: this.$store.getters.UserNum,
          NOTES: '',
          OTTYPE: '', //加班类型偏好
          HOLIDAY: [],
          SKILLTYPE: '', //技能偏好类型
          SKILLLIST: [],
        },
      }
    },
    methods: {
      // 保存
      async savePrefer() {
        let arr = []
        if (this.form.OTTYPE != '') {
          arr.push({
            PRETYPE: '1',
            OTTYPE: this.form.OTTYPE,
            NOTES: this.form.NOTES1
          })
        }
        let flag = false
        let format = true
        let arr1 = {
          PRETYPE: '2',
          NOTES: this.form.NOTES2
        }
        this.tableData.forEach(item => {
          
          item.like1 = item.like1!=null && item.like1.filter(function (s) {
            return s && s.trim();
          });
          item.like2 = item.like2!=null && item.like2.filter(function (s) {
            return s && s.trim();
          });
          item.like3 = item.like3!=null && item.like3.filter(function (s) {
            return s && s.trim();
          });
          let item1 = item.like1.length
          let item2 = item.like2.length
          let item3 = item.like3.length
          if (item1 == 1 || item2 == 1 || item3 == 1) {
            format = false
            return
          }
          if(item1 == 2){
            if(item.like1.indexOf('')!=-1){
              format = false
              return
            }
          }
          if(item2 == 2){
            if(item.like2.indexOf('')!=-1){
              format = false
              return
            }
          }
          if(item3 == 2){
            if(item.like3.indexOf('')!=-1){
              format = false
              return
            }
          }
        })
        console.log(this.tableData)
        if (format == false) {
          this.$message.error('请在上班时间偏好中选择正确的时间格式')
          return
        }
        this.tableData.forEach((item, index) => {
          let item1 = item.like1.length
          let item2 = item.like2.length
          let item3 = item.like3.length
          if (item1 == 2 || item2 == 2 || item3 == 2) {
            flag = true
            let str = []
            item1 == 2 ? str.push(item.like1.join('-')) : ''
            item2 == 2 ? str.push(item.like2.join('-')) : ''
            item3 == 2 ? str.push(item.like3.join('-')) : ''
            arr1['PRETIME' + (index + 1)] = str.join(';')
          }
        })

        if (flag) {
          arr.push(arr1)
        }
        if (this.form.HOLIDAY.length > 0) {
          arr.push({
            PRETYPE: '3',
            HOLIDAY: this.form.HOLIDAY.join(','),
            NOTES: this.form.NOTES3
          })
        }
        if (this.form.SKILLTYPE != '') {
          if (this.form.SKILLTYPE == '1' && this.form.SKILLLIST.length == 0) {
            this.$message.error('请配置技能列表')
            return
          }
          arr.push({
            PRETYPE: '4',
            SKILLTYPE: this.form.SKILLTYPE,
            SKILLLIST: this.form.SKILLLIST.join(','),
            NOTES: this.form.NOTES3
          })
        }
        let resBody = new manage();
        resBody.data.AGENTID = this.form.AGENTID
        resBody.data.PRELIST = arr
        let response = await requestWFM(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.$message({
            type: 'success',
            message: '保存成功'
          })
          this.queryPrefer()
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      // 查询坐席偏好
      async queryPrefer() {
        this.buttonFlag = []
        this.tableData = [{
            PRETIME: '周一',
            like1: [],
            like2: [],
            like3: []
          },
          {
            PRETIME: '周二',
            like1: [],
            like2: [],
            like3: []
          },
          {
            PRETIME: '周三',
            like1: [],
            like2: [],
            like3: []
          },
          {
            PRETIME: '周四',
            like1: [],
            like2: [],
            like3: []
          },
          {
            PRETIME: '周五',
            like1: [],
            like2: [],
            like3: []
          },
          {
            PRETIME: '周六',
            like1: [],
            like2: [],
            like3: []
          },
          {
            PRETIME: '周日',
            like1: [],
            like2: [],
            like3: []
          },
        ]
        this.form = {
          NOTES1: '',
          NOTES2: '',
          NOTES3: '',
          NOTES4: '',
          AGENTID: this.$store.getters.UserNum,
          NOTES: '',
          OTTYPE: '', //加班类型偏好
          HOLIDAY: [],
          SKILLTYPE: '', //技能偏好类型
          SKILLLIST: [], //SKILLTYPE=1时存储技能列表
        }
        let resBody = new query();
        resBody.data.AGENTID = this.form.AGENTID
        let response = await requestWFM(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          let res = response.BODY.PRELIST
          if (res.length > 0) {
            res.forEach(item => {
              this.buttonFlag.push(item.PRETYPE)
              if (item.PRETYPE == '1') {
                this.form.OTTYPE = item.OTTYPE
                this.form.NOTES1 = item.NOTES
              } else if (item.PRETYPE == '2') {
                if (item.PRETIME1) {
                  this.tableData[0].like1 = item.PRETIME1.split(';')[0] != undefined ? item.PRETIME1.split(';')[0]
                    .split('-') : []
                  this.tableData[0].like2 = item.PRETIME1.split(';')[1] != undefined ? item.PRETIME1.split(';')[1]
                    .split('-') : []
                  this.tableData[0].like3 = item.PRETIME1.split(';')[2] != undefined ? item.PRETIME1.split(';')[2]
                    .split('-') : []
                }
                if (item.PRETIME2) {
                  this.tableData[1].like1 = item.PRETIME2.split(';')[0] != undefined ? item.PRETIME2.split(';')[0]
                    .split('-') : []
                  this.tableData[1].like2 = item.PRETIME2.split(';')[1] != undefined ? item.PRETIME2.split(';')[1]
                    .split('-') : []
                  this.tableData[1].like3 = item.PRETIME2.split(';')[2] != undefined ? item.PRETIME2.split(';')[2]
                    .split('-') : []
                }
                if (item.PRETIME3) {
                  this.tableData[2].like1 = item.PRETIME3.split(';')[0] != undefined ? item.PRETIME3.split(';')[0]
                    .split('-') : []
                  this.tableData[2].like2 = item.PRETIME3.split(';')[1] != undefined ? item.PRETIME3.split(';')[1]
                    .split('-') : []
                  this.tableData[2].like3 = item.PRETIME3.split(';')[2] != undefined ? item.PRETIME3.split(';')[2]
                    .split('-') : []
                }
                if (item.PRETIME4) {
                  this.tableData[3].like1 = item.PRETIME4.split(';')[0] != undefined ? item.PRETIME4.split(';')[0]
                    .split('-') : []
                  this.tableData[3].like2 = item.PRETIME4.split(';')[1] != undefined ? item.PRETIME4.split(';')[1]
                    .split('-') : []
                  this.tableData[3].like3 = item.PRETIME4.split(';')[2] != undefined ? item.PRETIME4.split(';')[2]
                    .split('-') : []
                }
                if (item.PRETIME5) {
                  this.tableData[4].like1 = item.PRETIME5.split(';')[0] != undefined ? item.PRETIME5.split(';')[0]
                    .split('-') : []
                  this.tableData[4].like2 = item.PRETIME5.split(';')[1] != undefined ? item.PRETIME5.split(';')[1]
                    .split('-') : []
                  this.tableData[4].like3 = item.PRETIME5.split(';')[2] != undefined ? item.PRETIME5.split(';')[2]
                    .split('-') : []
                }
                if (item.PRETIME6) {
                  this.tableData[5].like1 = item.PRETIME6.split(';')[0] != undefined ? item.PRETIME6.split(';')[0]
                    .split('-') : []
                  this.tableData[5].like2 = item.PRETIME6.split(';')[1] != undefined ? item.PRETIME6.split(';')[1]
                    .split('-') : []
                  this.tableData[5].like3 = item.PRETIME6.split(';')[2] != undefined ? item.PRETIME6.split(';')[2]
                    .split('-') : []
                }
                if (item.PRETIME7) {
                  this.tableData[6].like1 = item.PRETIME7.split(';')[0] != undefined ? item.PRETIME7.split(';')[0]
                    .split('-') : []
                  this.tableData[6].like2 = item.PRETIME7.split(';')[1] != undefined ? item.PRETIME7.split(';')[1]
                    .split('-') : []
                  this.tableData[6].like3 = item.PRETIME7.split(';')[2] != undefined ? item.PRETIME7.split(';')[2]
                    .split('-') : []
                }
                this.form.NOTES2 = item.NOTES
              } else if (item.PRETYPE == '3') {
                this.form.HOLIDAY = item.HOLIDAY.split(',')
                this.form.NOTES3 = item.NOTES
              } else {
                this.form.SKILLTYPE = item.SKILLTYPE
                this.form.SKILLLIST = item.SKILLTYPE == '1' ? item.SKILLLIST.split(',') : []
                this.form.NOTES4 = item.NOTES
              }
            })
          }
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      // 删除坐席偏好
      delPrefer(id) {
        this.$confirm('此操作将删除该偏好, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let resBody = new del();
          resBody.data.AGENTID = this.form.AGENTID
          resBody.data.PRETYPE = id
          let response = await requestWFM(resBody);
          if (response.SYS_HEAD.ReturnCode == "000000") {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.queryPrefer()
          } else {
            this.$message({
              type: "error",
              message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
            })
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 查询坐席技能数据字典
      async skillDataQuery() {
        let resBody = new dataQuery();
        resBody.data.FIELDCODE = 'AGENTSKILL'
        resBody.data.CurrPage = 1
        resBody.data.PageRowNum = 200
        let response = await requestWFM(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.skillOption = response.BODY.FIEDATA;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      // 选择技能偏好
      changeSkill() {
        if (this.form.SKILLTYPE != '1') {
          this.form.SKILLLIST = []
        }
      },
      ChangeTime(data,index){
        var time = ['00:00','00:00'];
        var that = this;
        
        switch(data.PRETIME) {
          case '周一':
              if(that.tableData[0][index] == null || that.tableData[0][index].length == 0){
                that.tableData[0][index] = time;
              }
              if(that.tableData[0][index][0] == ''){
                that.tableData[0][index] = time;
              }
              break;
          case '周二':
              if(that.tableData[1][index] == null || that.tableData[1][index].length == 0){
                that.tableData[1][index] = time;
              }
              if(that.tableData[1][index][0] == ''){
                that.tableData[1][index] = time;
              }
              break;
          case '周三':
              if(that.tableData[2][index] == null || that.tableData[2][index].length == 0){
                that.tableData[2][index] = time;
              }
              if(that.tableData[2][index][0] == ''){
                that.tableData[2][index] = time;
              }
              break;
          case '周四':
              if(that.tableData[3][index] == null || that.tableData[3][index].length == 0){
                that.tableData[3][index] = time;
              }
              if(that.tableData[3][index][0] == ''){
                that.tableData[3][index] = time;
              }
              break;
          case '周五':
              if(that.tableData[4][index] == null || that.tableData[4][index].length == 0){
                that.tableData[4][index] = time;
              }
              if(that.tableData[4][index][0] == ''){
                that.tableData[4][index] = time;
              }
              break;
          case '周六':
              if(that.tableData[5][index] == null || that.tableData[5][index].length == 0){
                that.tableData[5][index] = time;
              }
              if(that.tableData[5][index][0] == ''){
                that.tableData[5][index] = time;
              }
              break;
          case '周日':
              if(that.tableData[6][index] == null || that.tableData[6][index].length == 0){
                that.tableData[6][index] = time;
              }
              if(that.tableData[6][index][0] == ''){
                that.tableData[6][index] = time;
              }
              break;
        }
      }
    },
  }

</script>
<style lang="scss">
  // .el-transfer-panel__item+.el-transfer-panel__item {
  //   // margin-left: 0;
  //   // display: block !important;
  // }
  .el-checkbox {
    display: block;
  }

</style>
<style lang="scss" scoped>
  // .el-checkbox{
  //   display: block;
  // }
  .mt-15 {
    margin-top: 15px;
  }

  .ml-40 {
    margin-left: 40px;
  }

</style>
